<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <div class="filter-li">
                <label>客户单位</label>
                <el-select v-model="listQuery.customer_id" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in customers" :key="item.id" :label="item.dept" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>联系人姓名</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="联系人姓名" v-model="listQuery.name">
                </el-input>
            </div>
            <div class="filter-li">
                <label>联系人手机</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="联系人手机" v-model="listQuery.tel">
                </el-input>
            </div>
            <br/>
            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button class="filter-item" type="success" v-waves icon="edit" @click="add()">新增客户联系人</el-button>
        </div>

        <!-- 列表 -->
        <el-table :data="rows" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%"
            @current-change="onRowSelect">

            <el-table-column type="index" width="30">
            </el-table-column>

            <el-table-column align="center" label="客户单位">
                <template scope="scope">
                    <span>{{scope.row.customer.dept}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="联系人姓名">
                <template scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="部门">
                <template scope="scope">
                    <span>{{ scope.row.dept }}</span>
                </template>
            </el-table-column>

            <el-table-column align="left" label="职位">
                <template scope="scope">
                    <span>{{ scope.row.position }}</span>
                </template>
            </el-table-column>

            <el-table-column align="left" label="电话">
                <template scope="scope">
                    <span>{{ scope.row.tel }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="邮箱">
                <template scope="scope">
                    <span>{{ scope.row.email }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="180">
                <template scope="scope">
                    <!-- <el-button size="small" type="success" @click="edit(scope.row)">编辑</el-button> -->
                    <el-button size="small" type="success" @click="edit(scope.row, true)">编辑</el-button>
                    <el-button size="small" type="danger" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </div>

        <!-- 表单 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form ref="appForm" :rules="rules" class="small-space" :model="form" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
                <el-form-item label="客户单位" prop="customer_id">
                    <el-select v-model="form.customer_id" placeholder="请选择" >
                        <el-option v-for="item in customers" :key="item.id" :label="item.dept" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                    <el-input type="textarea" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="部门" prop="dept">
                    <el-input type="text" v-model="form.dept"></el-input>
                </el-form-item>

                <el-form-item label="职位" prop="position">
                    <el-input type="text" v-model="form.position"></el-input>
                </el-form-item>

                <el-form-item label="电话" prop="tel">
                    <el-input type="text" v-model="form.tel"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input type="email" v-model="form.email"></el-input>
                </el-form-item>

                <el-form-item label="QQ" prop="qq">
                    <el-input type="text" v-model="form.qq"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import api from '@/api/visit'
    import customerApi from '@/api/customer'
    import userApi from '@/api/user'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import { mapGetters, mapState } from 'vuex'
    import _ from 'lodash'
    import { clearObject } from '@/utils/object.js'

    export default {
        name: 'contact',
        directives: {
            waves
        },
        data() {
            return {
                listLoading: false,
                listQuery: {
                    page: 1,
                    limit: 20,
                    customer_id: '',
                    name: '',
                    tel: '',
                },
                dialogTitle: null,
                dialogFormVisible: false,
                form: {
                    id: null,
                    name: null,
                    sex: null,
                    dept:  null,
                    position: null,
                    tel: null,
                    work_tel: null,
                    email: null,
                    qq: null,
                    customer_id: null,
                },
                row: null, //当前选中行
                rules: {
                    customer_id: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    name: [{ required: true, message: '不能为空', trigger: 'blur' }],
                },
            }
        },
        computed: {
            ...mapState({
                customers: state => state.customers.rows,
                rows: state => state.contact.rows,
                count: state => state.contact.count,
            }),
        },
        async created() {
            await this.$store.dispatch('customers/loadCustomers')
            this.listQuery.customer_id = this.$route.query.customer_id || ''
            await this.getList()
        },
        methods: {
            async getList() {
                this.$store.dispatch('contact/page', this.listQuery)
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onRowSelect(val) {
                this.row = val
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            add() {
                this.dialogFormVisible = true
                clearObject(this.form)
            },
            edit(row) {
                this.dialogFormVisible = true
                this.form = row
            },
            async save() {
                this.$refs.appForm.validate(async valid => {
                    if (!valid) {
                        return
                    }
                    let ret = await this.$store.dispatch('contact/save', this.form)
                    if (!ret.success) {
                        return
                    }
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.dialogFormVisible = false
                    this.onFilter()
                    clearObject(this.form)
                })
            },
            remove(row) {
                this.$confirm('是否删除该数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ret = await this.$store.dispatch('contact/remove', row.id)
                    if (ret.success) {
                        this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.onFilter()
                    }
                })
            },
        }
    }

</script>
